<template>
  <div class="vc-page vc-page-parts page-roleRerm" style="position:relative;overflow:hidden;">
    <!-- 左侧 - 组织机构树 -->
    <div class="part-left">
      <div class="tree-title">
        角色树
        <el-tooltip content="刷新" placement="bottom">
          <i @click="filterText='';getTreeNotLazy(id)" class="vc-icon vc-icon-refresh"></i>
        </el-tooltip>
      </div>
      <el-input
        class="vc-search-input"
        clearable
        placeholder="请输入关键字"
        size="small"
        v-if="treeConfig.treeData && treeConfig.treeData.length"
        v-model="filterText"
      ></el-input>
      <el-tree
        :data="treeConfig.treeData"
        :default-expanded-keys="treeConfig.expandedKeys"
        :empty-text="treeEmptyText"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :highlight-current="false"
        :props="treeConfig.defaultProps"
        :render-after-expand="true"
        @node-click="handleNodeClick"
        @node-collapse="hideRightMenu"
        @node-expand="hideRightMenu"
        class="org-tree"
        node-key="id"
        ref="orgTree"
      >
        <span
          @mouseenter="point = data"
          @mouseleave="point = null"
          class="slot-scope"
          slot-scope="{ node, data }"
        >
          <span>
            <i :class="data.icon"></i>
            <span style="margin-left:5px;">{{ node.label }}</span>
            <i
              @click.stop="showHandleMenu(data, $event)"
              class="vc-icon vc-icon-more"
              v-if="point == data || (!point && data.id == currDicData.id && menuVisible)"
            ></i>
          </span>
        </span>
      </el-tree>
    </div>

    <!-- 右侧 - 子孙组织机构列表 -->
    <div class="part-right">
      <div class="role-info">
        <el-row>
          <el-col :span="24" class="title-class">
            <div class="icon-class bg-primary"></div>
            <span>角色信息</span>
          </el-col>
        </el-row>

        <el-row :key="idx" v-for="(item,idx) in rightText.itmes">
          <el-col :span="3" class="label">{{item.text}}</el-col>
          <el-col :span="21">
            <span
              v-if="item.type !=='dict'"
            >{{ rightText.params[item.key]?rightText.params[item.key]:' ' }}</span>
            <span
              v-else-if="item.type ==='dict'"
            >{{item.group[rightText.params[item.key]]?item.group[rightText.params[item.key]]:" "}}</span>
          </el-col>
        </el-row>
      </div>
      <!-- 查询条件 -->
      <!-- <searchHeader :searchConfig="searchConfig"></searchHeader> -->
      <!-- 操作按钮 -->
      <div class="vc-btns">
        <el-button @click="getPerTree" class="multi-words" size="small" type="primary">维护权限</el-button>
        <el-button :disabled="selectedIds.length === 0" @click="batchDel" size="small">删除</el-button>
      </div>

      <!-- 列表展示 -->
      <div class="vc-table">
        <tables
          :columns="tableConfig.columns"
          :stripe="true"
          @on-selection-change="onSelectionChange"
          ref="tables"
          v-model="tableConfig.tableData"
        />
        <!-- 分页 -->
        <el-pagination
          :current-page.sync="pageConfig.currentPage"
          :page-size="15"
          :total="pageConfig.total"
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          v-if="paginationShow"
        ></el-pagination>
      </div>
    </div>
    <!-- 右键菜单展示 -->
    <ul class="menu-handle-right" id="menuCM" v-show="menuVisible">
      <li :key="idx" @click="item.click" v-for="(item,idx) in RightBox">{{item.title}}</li>
    </ul>
    <!-- 授予权限 -->
    <SelectBox
      :allNode="addPerConfig.allNode"
      :boxDialogVisible="addPerConfig.editVisible"
      :checkedNode="addPerConfig.checked"
      :iconConfig="addPerConfig.iconConfig"
      :listStyle="addPerConfig.listStyle"
      :rightKey="addPerConfig.rightKey"
      :searchConfig="addPerConfig.search"
      :title="addPerConfig.title"
      @close="closeAddPerDialog"
      @save="saveAdd"
      ref="selectBox"
    />

    <!-- 新增角色 -->
    <add-role
      :addRoleDialogVisible="addRoleDialogVisible"
      :orgId="pid"
      @close="closeAddRoleDialog"
      class="personnel-form"
    ></add-role>
    <!-- 新增角色组 -->
    <add-rolegroup
      :addRoleGroupDialogVisible="addRoleGroupDialogVisible"
      :pid="pid"
      @close="closeAddRoleGroupDialog"
      ref="addRoleGroupDialog"
    ></add-rolegroup>

    <!-- 编辑角色 -->
    <edit-role
      :editRoleDialogVisible="editRoleDialogVisible"
      :id="id"
      :rgTreeDataHasTop="selectTree"
      @close="closeeditRoleDialog"
      ref="editRoleDialog"
      v-model="editFormData"
    ></edit-role>
    <!-- 修改角色组 -->
    <edit-role-group
      :editRoleGroupDialogVisible="editRoleGroupDialogVisible"
      :id="id"
      :rgTreeDataHasTop="selectTree"
      @close="closeEditRoleGroupDialog"
      ref="editRoleDialog"
      v-model="editGroupFormData"
    />
    <!-- 新增权限模态框 -->

    <el-dialog :visible.sync="dialogFormVisible" title="维护权限" width=" 480px">
      <div class="content" style="padding:0 40px">
        <el-tree
          :data="PerTreeConfig.treeData"
          :default-expanded-keys="PerTreeConfig.expandedKeys"
          :empty-text="GLOBAL.QUERY.EMPTY_TEXT"
          :props="PerTreeConfig.defaultProps"
          :show-checkbox="true"
          @node-click="handlePerNodeClick"
          class="org-tree"
          highlight-current
          node-key="id"
          ref="perTree"
        ></el-tree>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button @click="ok()" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="less">
.keyClass {
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: flex-end;
  color: #999999;
  font-size: 15px;
}
.valueClass {
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: flex-start;
  font-size: 15px;
}
.titleClass {
  display: flex;
  align-items: center;
  background-color: #ebeef5;
  height: 26px;
}
.iconClass {
  width: 5px;
  height: 15px;
  background-color: #2ab099;
  margin-right: 5px;
}
.page-roleRerm {
  .menu-info,
  .role-info {
    margin-bottom: 30px;
    .title-class {
      height: 30px;
      display: flex;
      align-items: center;
      background-color: #ebeef5;
      font-size: 16px;
      .icon-class {
        width: 3px;
        height: 12px;
        margin-right: 8px;
      }
    }
    .el-col:not(.title-class) {
      line-height: 20px;
      margin: 10px 0;
      display: flex;
      align-items: center;
      &.label {
        justify-content: flex-end;
        color: #818181;
        padding-right: 20px;
      }
      &:not(.label) {
        text-align: left;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        i {
          font-size: 14px;
        }
      }
    }
    .el-row {
      &:nth-child(2) {
        margin-top: 10px;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
  }
}
</style>

<script>
import AddRole from './addrole'
import editRole from './editRole'
import AddRolegroup from './addRolegroup'
import editRoleGroup from './editRolegroup'
import SelectBox from '_c/selectBox'
import supForm from '_c/form'
import Tables from '_c/tables'
import searchHeader from '_c/searchHeader'
import store from '@/store'
const SFGD = store.state.dic.listFormat['sfgd'].map(i => {
  i.title = i.name
  i.key = i.code
  return i
})
const SFGDMAP = store.state.dic.mapFormat['sfgd']
export default {
  name: 'rolePerm',
  components: {
    AddRole,
    editRole,
    AddRolegroup,
    Tables,
    SelectBox,
    searchHeader,
    supForm,
    editRoleGroup
  },
  data () {
    return {
      pid: '',
      selectId: '',
      // 修改角色组
      editRoleGroupDialogVisible: false,
      editGroupFormData: {},
      // 新增角色组
      addRoleGroupDialogVisible: false,
      // 修改角色
      editRoleDialogVisible: false,
      editFormData: {},
      selectTree: [],
      // 新增角色
      addRoleDialogVisible: false,
      currDicData: {},
      point: null,
      menuVisible: false,
      RightBox: {},
      // 右侧信息
      rightText: {
        title: '角色信息',
        itmes: [
          {
            text: '编码',
            key: 'code'
          },
          {
            text: '名称',
            key: 'name'
          },
          {
            text: '角色描述',
            key: 'descr',
            type: 'textarea'
          }
        ],
        params: {}
      },
      // 测试对话框
      dialogFormVisible: false,
      formLabelWidth: '120px',
      // 左侧树
      treeConfig: {
        orgTreeData: [],
        expandedKeys: [],
        defaultProps: {
          id: 'id',
          label: 'text',
          children: 'children',
          isLeaf: 'isLeaf',
          disabled: (data, node) => {
            if (data.type === 'rgroup' && data.children && data.children.length === 0) {
              return true
            }
          }
        }
      },
      treeEmptyText: ' ',
      filterText: '',
      // 右侧权限树
      PerTreeConfig: {
        PerTreeData: [],
        expandedKeys: [],
        defaultProps: {
          id: 'id',
          label: 'text',
          children: 'children',
          isLeaf: 'isLeaf'
        }
      },
      // 列表
      id: '',
      queryData: {
        name: '',
        state: ''
      },
      // 搜索输入框
      searchConfig: {
        items: [
          {
            key: 'code',
            title: '权限编码',
            width: '140px',
            placeholder: '请输入权限编码'
          },
          {
            key: 'name',
            title: '权限名称',
            width: '140px',
            placeholder: '请输入权限名称'
          }
        ],
        search: params => {
          this.findByRoleIdFuzzyPage(this.id)
        },
        reset: () => {
          this.findByRoleIdFuzzyPage(this.id)
        },
        params: {
          
        }
      },
      searchData: {},
      tableEmptyText: ' ',
      paginationShow: true,
      // 分页配置
      pageConfig: {
        currentPage: 1,
        total: 0
      },
      tableConfig: {
        columns: [
          {
            type: 'selection',
            width: '50'
          },
          {
            title: '序号',
            type: 'index',
            width: '50'
          },
          {
            key: 'code',
            title: '权限编码'
          },
          {
            key: 'name',
            title: '权限名称'
          },
          {
            key: 'descr',
            title: '描述'
          }
        ],
        tableData: []
      },
      orgTableData: null,
      selectedIds: [],
      entity: {},
      addDialogVisible: false,
      editDialogVisible: false,
      // 授予权限模态框
      addPerConfig: {
        iconConfig: {
          parentType: {
            key: 'mgroup',
            icon: 'vc-icon vc-icon-tree-rGroup'
          },
          childrenType: {
            key: 'permission',
            icon: 'vc-icon vc-icon-tree-role'
          }
        },
        rightKey: 'name',
        editVisible: false,
        title: '维护权限',
        listStyle: 'tree',
        search: {
          title: '请输入',
          patch: 'getpermissionByName',
          key: 'name',
          params: {}
        },
        defaultProps: {
          id: 'id',
          label: 'name',
          children: 'children',
          isLeaf: 'isLeaf'
        },
        allNode: [],
        checked: []
      }
    }
  },
  computed: {
    orgStateList () {
      return this.$store.state.dic.orgStateList
    }
  },
  watch: {
    filterText (val) {
      this.$refs.orgTree.filter(this.GLOBAL.filter.filterSpace(val))
    }
  },
  mounted () {
    $('.org-tree').scroll(() => {
      this.hideRightMenu(s)
    })
    document.addEventListener('mousedown', this.mousedown)
    this.getTreeNotLazy()
  },
  beforeDestroy () {
    document.removeEventListener('mousedown', this.mousedown)
  },
  methods: {
    /*
      修改角色组关闭
    */
    closeEditRoleGroupDialog (val) {
      this.editRoleGroupDialogVisible = false
      if (val) {
        this.treeConfig.expandedKeys.push(this.selectId.id)
        this.getTreeNotLazy(this.id)
      }
    },
    /**
     * '新增角色组'弹出框关闭事件
     */
    closeAddRoleGroupDialog (val) {
      this.addRoleGroupDialogVisible = false
      if (val) {
        this.treeConfig.expandedKeys.push(this.selectId)
        this.getTreeNotLazy(this.id)
      }
    },
    /**
     * '修改角色'弹出框关闭事件
     */
    closeeditRoleDialog (val) {
      this.editRoleDialogVisible = false
      if (val) {
        this.treeConfig.expandedKeys.push(this.selectId.id)
        this.getTreeNotLazy(this.id)
      }
    },
    /**
     * 编辑角色
     */
    editRole () {
      this.editRoleDialogVisible = true
    },
    /**
     * 根据用户组Id与roles删除关联 删除角色
     */
    delRole () {
      this.$confirmBox(this.delRoleFn)
    },
    delRoleFn () {
      this.$api
        .delRole({
          data: {
            id: this.selectId
          }
        })
        .then(res => {
          this.getTreeNotLazy(this.id)
          if (res.success) {
            this.$notifyBox('删除成功', 'success')
          }
        })
    },
    /**
     * 新增角色
     */
    addRole () {
      this.addRoleDialogVisible = true
    },
    /**
     * '角色'弹出框关闭事件
     */
    closeAddRoleDialog (val) {
      this.addRoleDialogVisible = false
      if (val) {
        this.treeConfig.expandedKeys.push(this.selectId.id)
        this.getTreeNotLazy(this.id)
      }
    },
    /**
     * 鼠标点击触发事件
     */
    mousedown (ev) {
      if (!this.menuVisible) return
      let pid = ev.target.parentElement.id
      if (pid !== 'menuCM') return this.hideRightMenu()
      if (ev.button !== 0) return
      ev.target.click()
      this.hideRightMenu()
    },
    /**
     * 隐藏右键菜单
     */
    hideRightMenu () {
      this.menuVisible = false
    },
    /**
     * 显示树节点操作菜单
     */
    showHandleMenu (data, ev) {
      this.rightClick(data)
      this.currDicData = Object.assign({}, data)
      let $menu = $('#menuCM')
      if (ev.clientY + $menu.outerWidth() < innerHeight) {
        $menu.css('top', ev.clientY + 'px')
        $menu.css('bottom', 'auto')
      } else {
        $menu.css('top', 'auto')
        $menu.css('bottom', innerHeight - ev.clientY + 'px')
      }
      $menu.css('left', ev.clientX + 'px')
      this.menuVisible = true
    },
    /**
     * 树节点更多点击时的回调
     */
    rightClick (data) {
      this.pid = data.pid
      this.selectId = data.id
      for (var i = this.selectTree.length - 1; i >= 0; i--) {
        if (this.selectTree[i].type === 'role') {
          this.selectTree.splice(i, 1)
        }
      }
      this.selectTree = this.GLOBAL.array.transToTreeData(this.selectTree)
      switch (data.type) {
        case 'rgroup':
          this.RightBox = this.rgroup()
          this.editGroupFormData = data.data
          break
        case 'role':
          this.RightBox = this.role()
          this.editFormData = data.data
          break
        default:
          break
      }
    },
    /*
      配置模块右键内容
    */
    rgroup () {
      return [
        {
          title: '新增同级角色组',
          click: row => {
            this.addRoleGroupDialogVisible = true
          }
        },
        {
          title: '新增下级角色组',
          click: () => {
            this.pid = this.selectId
            this.addRoleGroupDialogVisible = true
          }
        },
        {
          title: '新增下级角色',
          click: () => {
            this.addRole()
          }
        },
        {
          title: '修改角色组',
          click: () => {
            this.editRoleGroupDialogVisible = true
          }
        },
        {
          title: '删除角色组',
          click: () => {
            this.$confirmBox(this.deleteModel)
          }
        }
      ]
    },
    role () {
      return [
        {
          title: '修改角色',
          click: () => {
            this.editRole()
          }
        },
        {
          title: '删除角色',
          click: () => {
            this.delRole()
          }
        }
      ]
    },
    /*
      删除角色组
    */
    deleteModel () {
      this.$api
        .delRoleGroup({
          data: {
            id: this.selectId
          }
        })
        .then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.getTreeNotLazy()
          } else {
            this.getTreeNotLazy()
          }
        })
    },
    /**
     * saveAdd
     */
    saveAdd (add, deletelist) {
      this.$api
        .removeAndAddPer({
          data: {
            addPermissionIds: add,
            removePermissionIds: deletelist,
            roleId: this.id
          }
        })
        .then(res => {
          if (res.success) {
            this.$notifyBox('维护权限成功', 'success')
            this.addPerConfig.editVisible = false
            this.pageConfig.currentPage = 1
            this.findByRoleIdFuzzyPage(this.id)
            return
          }
          this.$refs.selectBox.closeDisabled()
        })
        .catch(() => {
          this.$refs.selectBox.closeDisabled()
        })
    },
    /**
     * '权限'弹出框关闭事件
     */
    closeAddPerDialog (val) {
      this.addPerConfig.editVisible = false
      this.searchData = {}
    },
    /**
     * 获取左侧树数据
     */
    getTreeNotLazy (checkedKey) {
      this.$api
        .getAllrole({
          data: {}
        })
        .then(async (res) => {
          if (!res.success) {
            return;
          }
          this.treeEmptyText = this.GLOBAL.QUERY.EMPTY_TEXT
          let temp1 = res.data || [];
          for (var i = temp1.length - 1; i >= 0; i--) {
            if (temp1[i].type === 'rgroup') {
              temp1[i].icon = 'vc-icon vc-icon-tree-rGroup'
            } else {
              temp1[i].icon = 'vc-icon vc-icon-tree-role'
            }
          }
          this.selectTree = temp1
          let checked = res.data.filter(item => item.id === checkedKey)
          let rgTreeDataHasTop = this.GLOBAL.array.transToTreeData(temp1)
          let expandedKeys = []
          this.getFirst(rgTreeDataHasTop, expandedKeys)
          this.treeConfig.treeData = rgTreeDataHasTop
          if (!checkedKey || temp1.filter(i => i.data.id === checkedKey).length === 0) {
            this.treeConfig.expandedKeys = []
            if (expandedKeys.length !== 0) {
              this.rightText.params = expandedKeys[0].data
              this.treeConfig.expandedKeys.push(expandedKeys[0].id)
              this.handleNodeClick(expandedKeys[0])
              this.$nextTick(() => {
                this.$refs.orgTree.setCurrentKey(expandedKeys[0].id)
              })
            }
            return
          }
          expandedKeys = this.$refs.orgTree.store
            ._getAllNodes()
            .filter(item => item.expanded === true)
            .map(item => item.key)
          this.treeConfig.expandedKeys = expandedKeys
          if (!checked.length) {
            if (expandedKeys.length !== 0) {
              this.rightText.params = expandedKeys[0].data
              this.treeConfig.expandedKeys.push(expandedKeys[0].id)
              this.handleNodeClick(expandedKeys[0])
              this.$nextTick(() => {
                this.$refs.orgTree.setCurrentKey(expandedKeys[0].id)
              })
            } else {
              this.handleNodeClick(this.treeConfig.treeData[0])
            }
          } else {
            this.handleNodeClick(checked[0])
            this.$nextTick(() => {
              this.$refs.orgTree.setCurrentKey(checkedKey)
            })
          }
        })
    },
    /**
     * 树节点被点击时的回调
     */
    handleNodeClick (data) {
      if (data.type !== 'rgroup') {
        this.id = data.id
        this.rightText.params = data.data
        this.reset()
        this.search()
      } else {
        this.$nextTick(() => {
          this.$refs.orgTree.setCurrentKey(this.id)
        })
      }
    },
    /*
      获取授权model 树状图
    */
    getPerTree () {
      this.$api.getMGroupTreeCurr().then(res => {
        if (!res.success) {
          return
        }
        res.data = res.data || [];
        res.data.forEach(i => {
          i = Object.assign(i, i.data)
        })
        this.addPerConfig.allNode = res.data
        this.$api.findByRoleId({ data: { roleId: this.id } }).then(call => {
          if (call.data) {
            this.addPerConfig.checked = call.data
          } else {
            this.addPerConfig.checked = []
          }
          this.addPerConfig.editVisible = true
        })
      })
    },
    /*
      点击权限树回调
    */
    handlePerNodeClick () {},
    // 点击对话框ok
    ok () {
      let params = {
        roleId: this.id,
        permissionIds: this.GLOBAL.array.selectOneKey(
          this.$refs.perTree.getCheckedNodes(),
          'id'
        )
      }
      this.$api.addByRoleIdAndPermissionIds({ data: params }).then(res => {
        if (res.success) {
          this.$message({
            showClose: true,
            message: '维护权限成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.findByRoleIdFuzzyPage(this.id)
        }
      })
    },
    /**
     * 获取右侧列表数据
     */
    findByRoleIdFuzzyPage (roleId) {
      let params = {
        id: roleId,
        pageNum: this.pageConfig.currentPage,
        pageSize: 15,
        params: this.searchConfig.params
      }
      this.$api
        .findByRoleIdFuzzyPage({
          data: params
        })
        .then(res => {
          if (res.data.records.length !== 0) {
            this.tableConfig.tableData = res.data.records
            this.pageConfig.total = res.data.total
            this.pageConfig.currentPage = res.data.current
          } else if (this.pageConfig.currentPage > 1) {
            this.pageConfig.currentPage--
            this.findByRoleIdFuzzyPage(this.id)
          } else {
            this.pageConfig.currentPage = 1
            this.pageConfig.total = 0
            this.tableConfig.tableData = []
          }
        })
    },
    /**
     * 格式化列表数据
     */
    indexMethod (index) {
      return this.GLOBAL.formatter.formatIndex(index, this.currentPage)
    },
    formatType (row) {
      return row.type ? this.$store.state.dic.orgTypes[row.type] : ''
    },
    formatState (row) {
      return row.state ? this.$store.state.dic.orgStates[row.state] : ''
    },
    formatDate (row) {
      return this.GLOBAL.formatter.formatDateTime(row.createTime)
    },
    /**
     * 点击页数
     */
    handleCurrentChange (val) {
      this.pageConfig.currentPage = val
      this.findByRoleIdFuzzyPage(this.id)
    },
    /**
     * 查询
     */
    search () {
      this.paginationShow = false
      this.$nextTick(() => {
        this.paginationShow = true
      })
      this.findByRoleIdFuzzyPage(this.id)
    },
    /**
     * 重置
     */
    reset () {
      this.searchConfig.params = this.GLOBAL.object.clearValOfObj(
        this.searchConfig.params
      )
    },
    /**
     * '新增'弹出框关闭事件
     */
    closeAddDialog (val) {
      this.addDialogVisible = false
      if (val) {
        this.reset()
        this.searchData = {}
        this.currentPage = 1
        this.getTreeNotLazy(val.pid)
      }
    },
    /**
     * 复选框勾选
     */
    onSelectionChange (val) {
      this.selectedIds = this.GLOBAL.array.selectOneKey(val, 'id')
    },
    /**
     * '删除'按钮点击事件
     */
    batchDel () {
      this.$confirmBox(this.handleDel)
    },
    /**
     * 删除
     */
    handleDel () {
      this.$api
        .removeByRoleIdAndPermissionIds({
          data: {
            roleId: this.id,
            permissionIds: this.selectedIds
          }
        })
        .then(res => {
          this.findByRoleIdFuzzyPage(this.id)
          if (res.success) {
            this.$notifyBox('删除成功', 'success')
            return
          }
        })
    },
    /*
      递归找第一个 type = 'permission'
    */
    getFirst (data, expandedKeys) {
      for (const i in data) {
        if (data[i]) {
          let node = data[i]
          if (node.type !== 'rgroup') {
            expandedKeys.push(node)
            return
          } else if (node.children && node.children.length !== 0) {
            this.getFirst(node.children, expandedKeys)
          }
        }
      }
    },
    /**
     * 操作列-编辑
     */
    handleEdit (row) {
      this.entity = Object.assign({}, row)
      this.editDialogVisible = true
    },
    /**
     * '编辑'弹出框关闭事件
     */
    closeEditDialog (val) {
      this.editDialogVisible = false
      this.treeConfig.expandedKeys.push(this.selectId.id)
      if (val) {
        this.treeConfig.expandedKeys.push(this.selectId.id)
        this.getTreeNotLazy(this.id)
      }
    },
    /*
      左侧树图标
    */
    renderContent (h, { node, data, store }) {
      return (
        <span>
          <i class={data.icon}></i>
          <span> {node.label}</span>
        </span>
      )
    },
    /**
     * 对树节点进行筛选
     */
    filterNode (value, data) {
      if (!value) return true
      return data.text.indexOf(value) !== -1
    }
  }
}
</script>
